<template>
  <q-page v-show="isShow" class="wait-page">
    <section class="q-px-md q-py-md" style="overflow: hidden">
      <div class="q-mt-md" style="font-weight: 500; font-size: 24px">额度申请</div>
      <div class="q-mt-xs" style="color: #999">完善身份验证，助您快速获得额度</div>
    </section>

    <section class="bg-white q-mt-sm q-px-md">
      <q-responsive :ratio="750 / 752">
        <div class="loading-box center">
          <div class="center" style="font-weight: bold; font-size: 20px">{{ loadingTextTop }}</div>
          <div class="center" v-show="[1, 3, 4].includes(step)" style="font-size: 17px">
            {{ loadingTextBottom }}
          </div>
        </div>
      </q-responsive>

      <div class="q-my-md">
        <template v-if="step === 1">
          <div class="flex items-center justify-between">
            <div class="">身份核验</div>
            <div class="flex items-center">
              <div style="color: #fb7a13">待完成</div>
              <div class="center q-ml-xs">
                <img src="~/assets/images/waitpage/right.png" style="width: 14px" />
              </div>
            </div>
          </div>
        </template>
        <template v-else-if="step === 2">
          <div class="flex items-center justify-between">
            <div class="">身份核验</div>
            <div class="flex items-center">
              <div class="center">
                <img src="~/assets/images/waitpage/ok.png" style="width: 14px" />
              </div>
            </div>
          </div>
        </template>
        <template v-else>
          <div class="flex items-center justify-between">
            <div class="">身份核验</div>
            <div class="flex items-center">
              <div class="center">
                <img src="~/assets/images/waitpage/ok.png" style="width: 14px" />
              </div>
            </div>
          </div>
        </template>
      </div>
      <BackInfoDialog ref="BackInfoDialogRef" />
    </section>
  </q-page>
</template>

<script setup lang="ts">
import { useAppStore } from 'src/stores/app-store';
import { useRoute, useRouter } from 'vue-router';
import { useLoginHook } from 'src/hooks/login_hook';
import { computed, ref, watchEffect } from 'vue';
import { useWxHook } from 'src/hooks/wx_hooks';
import { productInfo } from 'src/config/env.config'
const router = useRouter();
const route = useRoute();

const { isAnyirongMini } = useWxHook();
const isApp = route.query.isApp as string;
const startTime = new Date().getTime();
const step = ref(1);
const timer = ref<number | NodeJS.Timeout | null>(null);
const isShow = ref(false);
const loadingTextTop = computed(() => {
  const indexMap = ['身份核验', '待完成', '身份信息', '开通中', '开通成功'];
  return indexMap[step.value - 1] ?? '开通成功';
});
const loadingTextBottom = computed(() => {
  const indexMap = ['待完成', '', '已完善', '…'];
  return indexMap[step.value - 1] ?? '';
});
const awaitEndTime = async () => {
  if (isAnyirongMini()) return ;
  const minAwaitTime = 3000
  const endTime = new Date().getTime();
  if (endTime - startTime >= minAwaitTime) return;
  return await new Promise((resolve) => setTimeout(resolve, minAwaitTime - (endTime - startTime)));
};

const initHomeData = async () => {
  const { initPage, jointLogin, getUserInfo, isInitPage } = useAppStore();
  if (!isInitPage) await initPage();
  timer.value = setInterval(() => {
    step.value++
  }, 500)
  try {
    const { chargeType, isLogin } = useAppStore();
    console.log(isLogin)
    const jointPhone = ((route.query.u as string) ?? '').trim();
    if (jointPhone && chargeType == 3) {
      await jointLogin(jointPhone);
      await awaitEndTime();
      clearInterval(timer.value)
      return useLoginHook(router, route).afterLoginHandler();
    }
    if (isLogin) {
      clearInterval(timer.value)
      await getUserInfo();
      // await awaitEndTime();
      return useLoginHook(router, route).afterLoginHandler();
    }
    isShow.value = true
    await awaitEndTime();
    clearInterval(timer.value)
    router.replace({ path: '/home', query: route.query });
  } catch (error) {
    console.error(error);
  }
};
const initData = async () => {
  const { tokenLogin, channelCode } = useAppStore();

  const token = route.query.token;
  const pn = route.query.pn as string || 'ayr';
  localStorage.setItem('pn', pn)
  window.document.title = productInfo[pn].name
  if (!isAnyirongMini()) {
    return initHomeData();
  }
  if (!token) {
    await awaitEndTime();
    return router.replace({ path: '/phoneLogin', query: route.query });
  }
  try {
    await tokenLogin(token as string);
    // await awaitEndTime();
    return useLoginHook(router, route).afterLoginHandler();
  } catch (error) {
    console.error(error);
  }
};

initData();
</script>

<style lang="scss" scoped>
.wait-page {
  background-color: #fff;
  background-image: url(src/assets/images/waitpage/header_old.png);
  background-repeat: no-repeat;
  background-size: 100% auto;
}
.loading-box {
  background: url(src/assets/images/waitpage/loading_old.gif) no-repeat;
  background-size: 100% 100%;
}
</style>
